import React, { useState } from 'react'
import { Outlet } from 'react-router-dom'

import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'

import { Layout, theme } from 'antd'
import CommonSider from '../components/CommonSider'
import CommonHeader from '../components/CommonHeader'
import CommonTag from '../components/CommonTag'
import { useSelector } from 'react-redux'

// 路由守卫
import { RouterAuth } from '../router/routerAuth'

const { Header, Content } = Layout

const Main = () => {
  // const [collapsed, setCollapsed] = useState(false)

  const {
    token: { colorBgContainer, borderRadiusLG }
  } = theme.useToken()
  // 获取展开收起的状态
  const collapsed = useSelector(state => state.tab.isCollapse)

  return (
    <RouterAuth>
      <Layout className="main-container">
        <CommonSider collapsed={collapsed}></CommonSider>
        <Layout>
          <CommonHeader collapsed={collapsed}></CommonHeader>
          <CommonTag></CommonTag>
          <Content
            style={{
              margin: '0.3rem 0.2rem',
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG
            }}
          >
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </RouterAuth>
  )
}

export default Main
